<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页聊天程序</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/client.css">
        <style>
            /* 将注销按钮定位到页面右上角 */
        .logout-btn-container {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 9999; /* 确保按钮位于最上层 */
        }

        #logout {
            padding: 10px 20px;
            background-color: #f44336; /* 红色背景 */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

        #logout:hover {
            background-color: #d32f2f; /* 悬停时颜色 */
        }

        /* 确保遮罩层有较低的层级并使其不完全遮挡按钮 */
        .cover {
            z-index: 1; /* 设置遮罩层的层级，使其低于注销按钮 */
            opacity: 0.5; /* 适当降低遮罩层透明度，确保内容可见 */
        }
    </style>

</head>
<body>
<!-- 作为遮罩层, 实现背景模糊的效果 -->
<div class="cover"></div>
<!-- 这个 div 作为整个界面的总的容器 -->
<div class="client-container">
    <!-- 中间的聊天区域 -->
    <div class="main">
        <!-- 左侧区域, 显示好友列表和会话列表 -->
        <!-- Group chat section -->


        <div class="left">
            <!-- 当前登录用户的用户名 -->
            <div class="user">
                <span id="current-user">用户名</span>
            </div>
            <!-- 搜索框 -->
            <div class="search">
                <input type="text" id="search-input" placeholder="请输入用户名">
                <button id="search-btn">🔍</button>
            </div>
            <!--好友申请-->
            <div class="friend-requests">
                <h3>好友申请</h3>
                <ul id="friend-request-list">
                    <!-- 动态生成 -->
                </ul>
            </div>


            <!-- 群聊 -->
            <div class="group-chat">
                <button id="create-group-chat">创建群聊</button>
                <ul id="group-chat-list">
                    <!-- 群聊项会在这里动态生成 -->
                </ul>
            </div>

            <!-- 标签页 -->
            <div class="tab">
                <div class="tab-session"></div>
                <div class="tab-friend"></div>
            </div>
            <!-- 会话列表 -->
            <ul class="list" id="session-list">
                <li><h3>lisi</h3><p>晚上吃啥</p></li>
                <li class="selected"><h3>lisi</h3><p>晚上吃啥</p></li>
                <li><h3>lisi</h3><p>晚上吃啥</p></li>
            </ul>
            <!-- 好友列表 -->
            <ul class="list hide" id="friend-list">
                <li><h4>lisi</h4></li>
            </ul>

        </div>

        <!-- 右侧区域, 显示聊天编辑框 -->
        <div class="right">
            <div class="title"></div>
            <div class="message-show"></div>
            <textarea class="message-input"></textarea>
            <div class="ctrl">
                <button>发送</button>
            </div>
        </div>
    </div>
</div>

<!-- 注销按钮 -->
<div class="logout-btn-container">
    <button id="logout">退出登录</button>
</div>

<!-- 引入 jquery -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/client.js"></script>

<script src="js/group.js"></script>
<script>
    // 注销按钮点击事件
    document.querySelector('#logout').onclick = function () {
        // 清除浏览器存储的用户信息
        localStorage.clear();  // 清除 localStorage
        sessionStorage.clear();  // 清除 sessionStorage

        // 跳转到登录页面
        location.assign('/login.html');
    };

    // 添加好友功能
    document.querySelector('#search-btn').addEventListener('click', function () {
        const searchInput = document.querySelector('#search-input');
        const username = searchInput.value.trim(); // 获取输入框值
        if (!username) {
            alert("请输入要搜索的用户名");
            return;
        }

        // 先检查本地好友列表，避免重复添加
        const friendItems = document.querySelectorAll('#friend-list li');
        for (let item of friendItems) {
            const nameSpan = item.querySelector('.friend-name');
            if (!nameSpan) continue;

            const friendName = nameSpan.textContent;
            if (friendName === username) {
                alert("该用户已经是您的好友，无需重复添加");
                searchInput.value = '';
                return;
            }
        }


        // 发起 Ajax 请求
        $.ajax({
            type: 'POST',
            url: '/user/addfriend',
            contentType: 'application/json',
            data: JSON.stringify({ username: username }),
            success: function(result) {
                searchInput.value = ''; // 清空输入框
                if (result.success) {
                    // ✅ 修改提示：现在是“好友申请已发送”
                    alert("好友申请已发送，等待对方确认！");
                } else {
                    // ⚠️ 保留原有提示
                    alert("添加失败：" + result.message);
                }
            },
            error: function(xhr, status, error) {
                searchInput.value = ''; // 清空输入框
                console.error("添加好友请求失败：", error);
                alert("请求失败，请稍后再试");
            }
        });
    });

    let currentUserId = null; // 提到外部，其他函数也能访问
    $(document).ready(function() {
        loadFriendRequests(); // 加载好友请求
        getFriendList();      // 加载好友列表

        setInterval(function () {
            loadFriendRequests();
            getFriendList();
        }, 10000); // 每10秒刷新一次
    });


    function loadFriendRequests() {
        $.get('/user/friendrequests', function(result) {
            const list = $('#friend-request-list');
            list.empty();
            if (result.success) {
                if (result.data.length === 0) {
                    list.append('<li>暂无好友申请</li>');
                } else {
                    result.data.forEach(req => {
                        const li = $(`
                        <li>
                            <span>${req.fromUsername}</span>
                            <button class="accept-btn" data-id="${req.id}">同意</button>
                            <button class="reject-btn" data-id="${req.id}">拒绝</button>
                        </li>
                    `);
                        list.append(li);
                    });
                }
            } else {
                console.error('加载好友请求失败:', result.message);
                list.append('<li>加载失败，请稍后再试</li>');
            }
        });
    }

    $(document).on('click', '.accept-btn, .reject-btn', function () {
        const requestId = $(this).data('id');
        const accept = $(this).hasClass('accept-btn');

        $.ajax({
            type: 'POST',
            url: '/user/respondfriend',
            contentType: 'application/json',
            data: JSON.stringify({ requestId: requestId, accept: accept }),
            success: function(result) {
                alert(result.message);
                loadFriendRequests(); // 刷新请求列表
                if (accept) {
                    getFriendList();
                    //location.reload();// 刷新好友列表（前提你已经实现了）
                }

            },
            error: function() {
                alert("操作失败，请稍后再试");
            }
        });
    });




</script>
</body>
</html>
